<template>
  <div class="pagewrapper p-12">
    <div class="br_4 h_full flex">
      <company-left :repoType="repoType" @handleItem="handleGroup" />
      <div class="pageright bg_fff">
        <div ref="pageheader">
          <div class="flexbetween p-12 pb-0">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              class="headerquery"
              :inline="true"
            >
              <el-form-item>
                <el-button
                  v-hasPermi="['system:grouptag:add']"
                  class="f-14 f14btn"
                  type="primary"
                  icon="el-icon-plus"
                  @click="handleAdd"
                >
                  添加客户群
                </el-button>
              </el-form-item>
              <el-form-item>
                自动打标签：未开启
                <span v-hasPermi="['system:grouptag:setlabel']" class="c_primary ml-5 commhover" @click="handleSet">设置</span>
              </el-form-item>

              <el-form-item prop="contentDesc">
                <el-select
                  v-model="queryParams.contentDesc"
                  @change="handleQuery"
                  style="width: 200px"
                  placeholder="选择所属企微号"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="keyword">
                <el-input
                  placeholder="搜索客户群"
                  v-model="queryParams.keyword"
                  @keyup.enter.native="handleQuery"
                  class="x-input-select"
                  style="width: 200px"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="flex aligncenter mb-18">
              <el-button
                v-hasPermi="['system:grouptag:taskcenter']"
                size="small"
                class="f-14 f14btn ml-8"
                icon="el-icon-date"
                @click="goPage('CustomerGroupCenter')"
                >任务中心</el-button
              >
            </div>
          </div>
        </div>
        <el-table
          v-loading="loading"
          :height="total > 0 ? tableHeight : 'auto'"
          :data="tableList"
          row-key="id"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80" align="center" />
          <el-table-column label="群名称" prop="userName">
            <template slot-scope="scope">
              <div class="flex kh_box">
                <img
                  src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                  alt=""
                  class="useravatar"
                />
                <div class="khnamebox flex aligncenter pl-12">
                  <div class="title w_full textover c_222333">
                    {{ scope.row.title || "--" }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="群成员数" prop="nickName">
            <template slot-scope="scope">
              <div class="f-14 c_text2">
                {{ scope.row.number || "0" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination
          class="mt-0"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        /> -->
        <div class="tag_foot flexbetween">
          <div>
            已选：<span class="c_primary">{{ multipleSelection.length }}</span>
            个客户群
            <span
              class="c_primary commhover"
              v-if="!checked"
              @click="handleSelectAll"
              >选择全部客户群</span
            >
            <span class="c_primary commhover" v-else @click="handleSelectClear"
              >取消选择全部客户群</span
            >
          </div>
          <div>
            <el-button size="small" v-hasPermi="['system:grouptag:remove']" :disabled="!checked" type="primary" plain @click="handleMove"
              >移动到其它标签</el-button
            >
            <el-button
              v-hasPermi="['system:grouptag:delete']"
              size="small"
              :disabled="!checked"
              type="primary"
              plain
              @click="handleDelete"
              >从标签里删除</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 添加客户群 -->
    <select-client-group
      v-if="addopen"
      :visable.sync="addopen"
      @close="handleClose"
    />
    <!-- 设置-自动打标签 -->
    <auto-dotag v-if="openset" :visable.sync="openset" />
    <!-- 移动到其它标签 -->
    <tag-move v-if="openMove" :visable.sync="openMove" :ids='multipleSelection' />
  </div>
</template>
<script>
import { scriptItemList, changeOrder, delScriptItem } from "@/api/market/reply";
import CompanyLeft from "./CompanyLeft.vue";
import TagMove from './components/TagMove.vue'
import SelectClientGroup from '@/components/UserGroupComp/SelectClientGroup'
import tablemixins from "@/mixins/tablemixins";
import AutoDotag from './components/AutoDotag.vue';

export default {
  data() {
    return {
      loading: false,
      statusOptions: [
        { name: "推荐客服名片", id: 1 },
        { name: "文本", id: 2 },
        { name: "图片", id: 3 },
        { name: "语音", id: 4 },
        { name: "图文链接", id: 5 },
        { name: "视频", id: 6 },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupId: "",
        contentDesc: undefined,
        title: undefined,
      },
      total: 0,
      tableList: [],
      addopen: false,
      multipleSelection: [], //表格多选
      checked: false,
      openMove:false,
      openset:false
    };
  },
  mixins: [tablemixins],
  components: {
    CompanyLeft,
    TagMove,
    SelectClientGroup,
    AutoDotag
  },
  props: {
    repoType: {
      require: true,
      default: 1,
    },
  },
  methods: {
    handleGroup(item) {
      console.log("点击了11", item);
      this.queryParams.groupId = item.id;
      this.queryParams.repoType = this.repoType;
      this.getList();
    },

    getList() {
      this.loading = true;
      scriptItemList(this.queryParams)
        .then((response) => {
          this.tableList = response.itemList;
          this.total = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        });
      }
      console.log("multipleSelection", this.multipleSelection);
    },

    handleSelectAll() {
      this.checked = true;
      this.$refs.multipleTable.toggleAllSelection();
    },

    handleSelectClear() {
      this.checked = false;
      this.$refs.multipleTable.clearSelection();
    },

    handleAdd() {
      this.addopen = true;
    },

    handleClose(type) {
      if (type == 1) {
        this.getList();
      }
      this.addopen = false;
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
      });
    },

    handleItem(item) {
      this.active = item.id;
    },

    handleMove(){
      this.openMove = true
    },

    handleDelete() {
      if (this.multipleSelection.length) {
        this.$msgBox
          .showMsgBox({
            title: "是否确定从这个标签删除这些群",
            content: "",
          })
          .then(() => {
            this.$message.success("删除成功!");
            this.getList();
            // delScriptGroup(row.id).then(() => {
            //   this.$message.success("删除成功!");
            //   this.getScriptGroupList();
            // });
          })
          .catch(() => {});
      }
    },

    handleSet(){
      this.openset = true
    },

    goPage(name) {
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageright {
  flex: 1 1;
  height: 100%;
  position: relative;
  // overflow: hidden;
}
.role-header {
  height: 64px;
  border-bottom: 1px solid #e0e0e0;
}
.infotitle {
  width: 160px;
  text-align: right;
}
.r_title {
  padding: 12px 0px 0px 12px;
}
.kh_box {
  // max-width: 240px;
}
.khnamebox {
  flex: 1 1;
  max-width: calc(100% - 60px);
}
.tag_foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05);
  z-index: 2;
}
</style>